<!DOCTYPE html>
<html>
<head>
  <title>Admin Signup</title>
  <link href="" rel="favicon" type="image/x-icon" />
  <style>
    body {
      font-family: sans-serif;
    }
    input {
      width: 200px;
      line-height: 1.5em;
      padding: 5px;
      font-size: 1.2em;
      border-radius: 4px;
      border: 1px solid #ddd;
      margin-bottom: 10px;
    }

    button {
      display: inline-block;
      padding: 25px;
      background: #69f;
      border-radius: 4px;
      font-weight: normal;
      font-size: 14px;
      color: #fff;
      letter-spacing: 1px;
      line-height: 1px;
      text-transform: uppercase;
      border: 0;
      min-width: 200px;
      cursor: pointer;
    }
  </style>

</head>
<body>


<div id="accounts">
  <h2>Create your account</h2>
  <input id="email" type="email" placeholder="Email (recovery)">
  <br>
  <button onclick='createAccount()'>Create account</button>
</div>

<form id="cert" method="POST" action='/api/accounts/cert' target="spkacResult" style="display: none">
  <h2>Finish by issuing credentials in the form of a certificate</h2>
  <keygen name="spkac" keytype="rsa" hidden />
  <iframe id="spkacResult" name="spkacResult" sandbox="allow-same-origin allow-forms" hidden></iframe>
  <input type="hidden" id="webid" name="webid" value="">
  <p>Your WebID is: <span id="your-webid"></span></p>
  <br>
  <input type="text" id="name" name="name" placeholder="Certificate label"> (e.g. your name and device)
  <br>
  <button onclick="done()" type="submit">Issue credentials</button>
</form>

<script type="text/javascript">
function createAccount () {
  var email = document.getElementById('email').value
  var url = '/api/accounts/new'
  var data = 'email=' + email

  var http = new XMLHttpRequest()
  http.open('POST', url)
  http.withCredentials = true
  http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
  http.onreadystatechange = function () {
    if (this.readyState === this.DONE) {
      if (this.status !== 200) {
        return err(new Error('Request failed'))
      }
      var webid = this.getResponseHeader('User')
      if (!webid || webid.length === 0) {
        return err(new Error('WebID is not set in User'))
      }
      // Account is created
      document.getElementById('webid').value = webid
      document.getElementById('your-webid').innerHTML = webid
      document.getElementById('accounts').style.display = 'none'
      document.getElementById('cert').style.display = ''
    }
  }
  http.send(data)
}

function err (err) {
  console.log('called done')
  if (err) {
    console.log(err)
  }
}

function done () {
  document.getElementById('cert').style.display = 'none'
  var done = document.createElement('div')
  done.innerHTML = '<h2>You\'re all set!</h2>'
  done.innerHTML += '<p>as soon as you will reset the page, you will be logged in!</p>'
  document.querySelector('body').appendChild(done)
}

document.querySelector('keygen').setAttribute('challenge', Date.now())

</script>
</body>
</html>
